<template>
  <!-- <div>红包专场列表</div> -->

  <div class="shop">
    <div class="top">
      <el-button size="small" type="primary" @click="isShowAddCategory = true">新增专场</el-button>

      <el-button class="search" size="small" type="primary" @click="searchCategoryData">搜索</el-button>
      <el-input class="search input" size="small" v-model="form.id" placeholder="输入id查询" clearable></el-input>
      <el-input
        class="search input"
        size="small"
        v-model="form.title"
        placeholder="输入专场名称查询"
        clearable
      ></el-input>
    </div>

    <el-table
      :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="专场ID" prop="id" width="100"></el-table-column>
      <el-table-column label="专场名称">
        <template slot-scope="scope">{{scope.row.title}}</template>
      </el-table-column>
      <!--<el-table-column label='专场名称'>-->
      <!--<template slot-scope="scope">-->
      <!--{{scope.row.name}}-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column label="有效时间">
        <template slot-scope="scope">
          {{scope.row.valid_start_time}} —
          {{scope.row.valid_end_time}}
          <!--<span class="cetain"
          v-if="scope.row.isCertain">（固定）</span>-->
        </template>
      </el-table-column>
      <el-table-column label="关联商品数" prop="product_count" width="140"></el-table-column>
      <el-table-column label="排序" prop="sort"></el-table-column>

      <el-table-column label="是否在红包专场展示">
        <template slot-scope="scope">
          <el-switch
            :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.type"
            @change="isUseActivityChange(scope.row.id,$event)"
          ></el-switch>
          <!-- <span v-else>已禁用</span> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="340">
        <template slot-scope="scope">
          <el-button size="mini" @click="lookMoreShop(scope.row.id)">二维码</el-button>
          <el-button size="mini" @click="go(scope.row)">关联商品库</el-button>
          <el-button size="mini" type="primary" @click="changeShopCate(scope.row)">编辑</el-button>
          <!--<el-button size='mini'-->
          <!--@click="gotoSaleDaily(scope.row.id)">销售日志</el-button>-->
          <el-button size="mini" @click="deleteShopCate(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

    <jdialog title="新增专场" :visible.sync="isShowAddCategory" width="640px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <!--<el-form-item label="专场标题："-->
        <!--prop="title">-->
        <!--<el-input v-model="cateForm.name"-->
        <!--style='width:180px;'-->
        <!--size='mini'-->
        <!--placeholder='请输入专场标题'></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="专场名称：" prop="title">
          <el-input v-model="cateForm.title" style="width:180px;" size="mini" placeholder="请输入专场名称"></el-input>
        </el-form-item>

        <el-form-item label="专场首页banner：" prop="banner">
          <uploadImg
            flieName="banner"
            class="icon_cate"
            :oldImgs="[cateForm.banner]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">首页专场模块内banner图，推荐宽高710*184px</p>
        </el-form-item>
        <el-form-item label="首页banner链接：">
          <el-input
            v-model="cateForm.banner_product"
            style="width:320px;"
            size="mini"
            placeholder="红包商品ID"
          ></el-input>
          <p style="font-size: 14px;color: #666">首页专场模块内banner图跳转链接，为空时跳转专题列表页</p>
        </el-form-item>

        <el-form-item label="专场列表banner：" prop="banner_list">
          <div>
            <uploadImg
              flieName="banner_list"
              class="icon_cate"
              :oldImgs="banner_list"
              :n="10"
              @getFile="getModifyFile"
            ></uploadImg>
          </div>
          <p class="note">专题列表页顶部大图，高度不限</p>
        </el-form-item>
        <el-form-item label="列表banner链接：">
          <el-input
            v-model="cateForm.banner_product_list[i]"
            style="width:100px;margin-right: 10px"
            size="mini"
            :key="i"
            v-for="(item,i) in len"
            placeholder="红包商品ID"
          ></el-input>
          <p style="font-size: 14px;color: #666">专场列表内banner图跳转链接，为空时不跳转</p>
        </el-form-item>

        <el-form-item label="有效时间：" prop="times">
          <el-date-picker
            v-model="cateForm.valid_start_time"
            class="picker"
            type="date"
            style="width:142px"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择开始时间"
          ></el-date-picker>~
          <el-date-picker
            v-model="cateForm.valid_end_time"
            type="date"
            style="width:142px"
            value-format="yyyy-MM-dd"
            size="small"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="专场排序：" prop="order">
          <el-input v-model="cateForm.sort" style="width:140px;" size="mini" placeholder="0～99"></el-input>
        </el-form-item>
        <el-form-item label="分享描述：" prop="share_describe">
          <el-input
            v-model="cateForm.share_describe"
            style="width:320px;"
            size="mini"
            type="text"
            maxlength="24"
            show-word-limit
            placeholder="分享描述"
          ></el-input>
          <p style="font-size: 14px;color: #666">分享描述不超过24个字</p>
        </el-form-item>
        <el-form-item label="分享图片：" prop="share_pic">
          <uploadImg
            flieName="share_pic"
            class="icon_cate"
            :oldImgs="[cateForm.share_pic]"
            :n="1"
            @getFile="getFileFX"
          ></uploadImg>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="cl_btn">取消</el-button>
        <el-button size="mini" type="primary" @click="certainAddCategory">确定</el-button>
      </div>
    </jdialog>
    <jdialog title="修改专场" :visible.sync="isShowModifyCategory" width="640px">
      <el-form :model="cateForm" :rules="rules" class="demo-ruleForm" label-width="140px">
        <!--<el-form-item label="专场标题："-->
        <!--prop="title">-->
        <!--<el-input v-model="cateForm.name"-->
        <!--style='width:180px;'-->
        <!--size='mini'-->
        <!--placeholder='请输入专场标题'></el-input>-->
        <!--</el-form-item>-->
        <el-form-item label="专场名称：" prop="title">
          <el-input v-model="cateForm.title" style="width:180px;" size="mini" placeholder="请输入专场名称"></el-input>
        </el-form-item>
        <el-form-item label="专场首页banner：" prop="banner">
          <uploadImg
            flieName="banner"
            class="icon_cate"
            :oldImgs="[cateForm.banner]"
            :n="1"
            @getFile="getFile"
          ></uploadImg>
          <p class="note">首页专场模块内banner图，推荐宽高710*184px</p>
        </el-form-item>
        <el-form-item label="首页banner链接：">
          <el-input
            v-model="cateForm.banner_product"
            style="width:320px;"
            size="mini"
            placeholder="红包商品ID"
          ></el-input>
          <p>首页专场模块内banner图跳转链接，为空时跳转专题列表页</p>
        </el-form-item>

        <el-form-item label="专场列表banner：" prop="banner_list">
          <div>
            <uploadImg
              flieName="banner_list"
              class="icon_cate"
              :oldImgs="cateForm.banner_list"
              :n="10"
              @getFile="getModifyFile"
            ></uploadImg>
          </div>
          <p class="note">专题列表页顶部大图，高度不限</p>
        </el-form-item>
        <el-form-item label="列表banner链接：">
          <el-input
            v-model="cateForm.banner_product_list[i]"
            style="width:100px;margin-right: 10px"
            size="mini"
            :key="i"
            v-for="(item,i) in len"
            placeholder="红包商品ID"
          ></el-input>
          <p>专场列表内banner图跳转链接，为空时不跳转</p>
        </el-form-item>
        <el-form-item label="有效时间：" prop="times">
          <el-date-picker
            v-model="cateForm.valid_start_time"
            class="picker"
            type="date"
            style="width:142px"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="选择开始时间"
          ></el-date-picker>~
          <el-date-picker
            v-model="cateForm.valid_end_time"
            type="date"
            style="width:142px"
            value-format="yyyy-MM-dd"
            size="small"
            placeholder="选择结束时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="专场排序：" prop="order">
          <el-input v-model="cateForm.sort" style="width:140px;" size="mini" placeholder="0～99"></el-input>
        </el-form-item>
        <el-form-item label="分享描述：">
          <el-input
            v-model="cateForm.share_describe"
            style="width:320px;"
            size="mini"
            type="text"
            maxlength="24"
            show-word-limit
            placeholder="分享描述"
          ></el-input>
          <p style="font-size: 14px;color: #666">分享描述不超过24个字</p>
        </el-form-item>
        <el-form-item label="分享图片：" prop="banner">
          <uploadImg
            flieName="share_pic"
            class="icon_cate"
            :oldImgs="[cateForm.share_pic]"
            :n="1"
            @getFile="getFileFX"
          ></uploadImg>
        </el-form-item>
      </el-form>

      <div class="align">
        <el-button size="mini" @click="cl_btn">取消</el-button>
        <el-button size="mini" type="primary" @click="certainModifyCategory">确定</el-button>
      </div>
    </jdialog>
    <jdialog title="商品图片查看" :visible.sync="isShowShopImg" width="640px">
      <div class="sku_pic">
        <img style="width:160px;height:160px;" class="sku_pic_margin" :src="img_urls" alt />
      </div>
    </jdialog>
  </div>
</template>


<script>
import uploadImg from "@/components/uploadImg";
import {
  // productCateCreate,
  // productCateIdDelete,
  // productCateIDUpdate,
  productpagelist,
  productpagecreate,
  productpagedelete,
  productpageupdate,
  productpagelistse,
  productpageqrcode,
  isUseRedBagChange
} from "@/api/autarky";

export default {
  name: "redEnvelopespecial",
  components: {
    uploadImg
  },
  data() {
    return {
      isShowAddCategory: false,
      isShowShopImg: false,
      isShowModifyCategory: false,
      id: "",
      len: "",
      img_urls: "",
      form: {
        id: "",
        title: "",
        page: 1,
        size: 20
      },

      total: 0,
      tableData: [],

      cateForm: {
        share_pic: "",
        share_describe: "",
        title: "",
        sort: "",
        banner: "",
        banner_list: [],
        banner_product_list: [],
        banner_product: "",
        // is_enable: '0',
        valid_start_time: "",
        valid_end_time: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        banner: [
          { required: true, message: "请上传分类专场图片", trigger: "blur" }
        ],
        banner_list: [
          { required: true, message: "请上传专场列表图片", trigger: "blur" }
        ],
        share_describe: [
          { required: true, message: "请添加描述", trigger: "blur" }
        ]
      },

      modifyForm: {
        title: "",
        sort: "",
        banner: "",
        banner_product: "",
        is_enable: "",
        banner_list: [],
        share_pic: "",
        share_describe: ""
      },
      modelrules: {
        title: [
          { required: true, message: "请输入商品分类名称", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30 个字符", trigger: "blur" }
        ],
        sort: [
          { required: true, message: "请输入商品分类排序", trigger: "blur" }
        ],
        banner: [
          { required: true, message: "请上传分类专场图片", trigger: "blur" }
        ],
        banner_list: [
          { required: true, message: "请上传专场列表图片", trigger: "blur" }
        ],
        share_describe: [
          { required: true, message: "请添加描述", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getproductpagelist();
  },
  methods: {
    cl_btn() {
      this.isShowAddCategory = false;
      this.isShowModifyCategory = false;
      this.cateForm = {
        title: "",
        sort: "",
        banner: "",
        banner_list: [],
        banner_product_list: [],
        banner_product: "",
        valid_start_time: "",
        valid_end_time: "",
        share_pic: "",
        share_describe: ""
      };
    },
    lookMoreShop(id) {
      this.getsupplyProductImgListData(id);
      this.isShowShopImg = true;
    },
    async getsupplyProductImgListData(ids) {
      let res = await productpageqrcode({ id: ids });
      console.log(res);
      if (res.code === 10000) {
        console.log(res);
        this.img_urls = res.data.url;
        console.log(this.img_urls);
        // this.tableData = res.data.data
        // this.total = res.data.total
      } else {
        this.$message.error(res.message);
      }
    },
    go(ids) {
      let id = ids.id;
      let tit = ids.title;
      this.$router.push({
        path: "/autarky/associatedCommodity?id=" + id + "&tit=" + tit
      });
    },
    //搜索数据
    searchCategoryData() {
      this.getproductpagelistse();
    },
    pageChange(page) {
      this.form.page = page;
      //获取更多数据
      this.getproductpagelist();
    },
    //更改红包是否展示
    isUseActivityChange(id, e) {
      //更新成功后重新获取商品
      this.getproductCateIsEnableUpdateData(id, e);
    },

    //修改商品分类
    changeShopCate(data) {
      console.log(data);
      let a = [];
      let b = [];
      for (let i = 0; i < data.page_banner.length; i++) {
        a.push(data.page_banner[i].banner);
        b.push(data.page_banner[i].banner_product);
      }
      this.len = data.page_banner.length;
      this.id = data.id;
      this.cateForm = {
        title: data.title,
        sort: data.sort,
        banner: data.banner,
        banner_product: data.banner_product,
        banner_list: a,
        banner_product_list: b,
        valid_start_time: data.valid_start_time,
        valid_end_time: data.valid_end_time,
        share_describe: data.share_describe,
        share_pic: data.share_pic
      };
      this.isShowModifyCategory = true;
    },

    //删除商品分类
    deleteShopCate(id) {
      this.$confirm("确认删除该专场？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(() => {
          this.getproductCateIdDeleteData(id);
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    //确定新增分类
    certainAddCategory() {
      this.getproductCateCreateData();
    },
    //确定修改分类
    certainModifyCategory() {
      this.getproductCateIDUpdateData();
    },
    //搜索商品分类列表数据
    async getproductpagelistse() {
      var url =
        "id=" +
        this.form.id +
        "&title=" +
        this.form.title +
        "&page=" +
        this.form.page;
      let res = await productpagelistse(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    //获取商品分类列表数据
    async getproductpagelist() {
      var url =
        "id=" +
        this.form.id +
        "&title=" +
        this.form.title +
        "&page=" +
        this.form.page;
      let res = await productpagelist(url);
      if (res.code === 10000) {
        this.tableData = res.data.data;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    //更新红包专场可用状态
    async getproductCateIsEnableUpdateData(product_id, is_enable) {
      let data = {
        type:is_enable,
        id:product_id
      }
      let res = await isUseRedBagChange(data);
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getproductpagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    //新增商品分类
    async getproductCateCreateData() {
      // console.log( this.cateForm.banner_product_list instanceof Array)
      let res = await productpagecreate(this.cateForm);
      if (res.code === 10000) {
        this.cateForm = {
          title: "",
          sort: "",
          banner: "",
          banner_list: [],
          banner_product_list: [],
          banner_product: "",
          valid_start_time: "",
          valid_end_time: "",
          share_pic: "",
          share_describe: ""
        };
        this.$message.success(res.message);
        this.getproductpagelist();
        this.isShowAddCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //修改商品分类
    async getproductCateIDUpdateData() {
      console.log(this.cateForm);
      let res = await productpageupdate(this.id, this.cateForm);
      if (res.code === 10000) {
        this.cateForm = {
          title: "",
          sort: "",
          banner: "",
          banner_list: [],
          banner_product_list: [],
          banner_product: "",
          valid_start_time: "",
          valid_end_time: ""
        };
        this.id = "";
        this.$message.success(res.message);
        this.getproductpagelist();
        this.isShowModifyCategory = false;
      } else {
        this.$message.error(res.message);
      }
    },
    //删除商品分类
    async getproductCateIdDeleteData(id) {
      console.log(id);
      let res = await productpagedelete(id);
      if (res.code === 10000) {
        this.$message.success(res.message);
        this.getproductpagelist();
      } else {
        this.$message.error(res.message);
      }
    },
    getFile(file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    getFileFX(file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },

    //获取商品图片
    getModifyFile(file) {
      if (file.files && file.files.length && file.name == "banner_list") {
        this.len = file.files.length;
        this.cateForm.banner_list = file.files.map(obj => obj.url);
      }
    },

    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }

  .cetain {
    color: #f4222d;
  }
  .pagination {
    float: right;
    margin-top: 12px;
  }

  .icon_cate {
    float: left;
  }
  .demo-ruleForm {
    padding: 20px;
  }
  .note {
    color: #666666;
    font-size: 14px;
    margin-top: 28px;
  }
  .align {
    text-align: center;
    margin-bottom: 20px;
  }
  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
